<div ng-include="'components/navbar/navbar.html'"></div>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
       <h4 id='loginTitle'>Sign Up</h4>


    </div>
    <div class="col-sm-12">
      <form class="form" name="form" ng-submit="register(form)" novalidate>

     

        <div class="form-group" ng-class="{ 'has-success': form.name.$valid && submitted,
                                            'has-error': form.name.$invalid && submitted }">
          
          <div class="input-field col s12">
            <input name='name' type="text" class="validate" ng-model="user.name" required/>
            <label for='name' class='active'>Name</label>
          </div>
          <p class="help-block" ng-show="form.name.$error.required && submitted">
            A name is required
          </p>
        </div>



     <div class="form-group" ng-class="{ 'has-success': form.username.$valid && submitted,
                                            'has-error': form.username.$invalid && submitted }">
          <div class="input-field col s12">
            <input name='username' type="text" class="validate" ng-model="user.username" required/>
            <label for="username" class='active'>Username (lowercase and numbers only)</label>
          </div>
          <p class="help-block" ng-show="form.username.$error.required && submitted">
            A username is required - lowercase and numbers only, no spaces
          </p>
          <p class="help-block" ng-show="form.username.$error.mongoose">
            {{ errors.username }}
          </p>
        </div>



        <div class="form-group" ng-class="{ 'has-success': form.email.$valid && submitted,
                                            'has-error': form.email.$invalid && submitted }">
          
          <div class="input-field col s12">
            <input name='email' type="email" class="validate" ng-model="user.email" required mongoose-error/>
            <label for="email" class='active'>Email</label>
          </div>                                   

          <p class="help-block" ng-show="form.email.$error.email && submitted">
            Doesn't look like a valid email.
          </p>
          <p class="help-block" ng-show="form.email.$error.required && submitted">
            What's your email address?
          </p>
          <p class="help-block" ng-show="form.email.$error.mongoose">
            {{ errors.email }}
          </p>
        </div>

        <div class="form-group" ng-class="{ 'has-success': form.password.$valid && submitted,
                                            'has-error': form.password.$invalid && submitted }">
          <div class="input-field col s12">
            <input name='password' type="password" class="validate" ng-model="user.password" ng-minlength="3"
                 required
                 mongoose-error>
            <label for="password" class='active'>Password</label>
          </div>     

          <p class="help-block"
             ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
            Password must be at least 3 characters.
          </p>
          <p class="help-block" ng-show="form.password.$error.mongoose">
            {{ errors.password }}
          </p>
        </div>

        <div>
          <button class="btn btn-inverse btn-lg btn-login" type="submit">
            Sign up
          </button>
         <!--
         <a class="btn btn-default btn-lg btn-register" href="/login">
            Login
          </a>
          -->
        </div>

        <hr>
        <div>
          <a class="btn btn-facebook" href="" ng-click="loginOauth('facebook')">
            <i class="fa fa-facebook"></i> Connect with Facebook
          </a>
          <a class="btn btn-google-plus" href="" ng-click="loginOauth('google')">
            <i class="fa fa-google-plus"></i> Connect with Google+
          </a>
          <a class="btn btn-twitter" href="" ng-click="loginOauth('twitter')">
            <i class="fa fa-twitter"></i> Connect with Twitter
          </a>
        </div>
      </form>
    </div>
  </div>
  <hr>
</div>
